import React from "react";
import {shortkeys} from '../../utils/utils'
import { Input } from "antd";
import './ShortKey.less'
import Radio from "antd/es/radio";
export default class ShortKey extends React.Component {
  state = {
    keyList:[...shortkeys]
  }

  displayKeyString(key:string):string{
    const isMac = !navigator.platform.startsWith("Win");
    const codes = key.split("+").map(item=>{
      return item.replace(/\b\w/g, (match) => match.toUpperCase());
    }).map(item=>{
      if(isMac){
        return item.replace(/Ctrl/g,'⌘').replace(/Shift/g,'⇧').replace(/control/g,'⌃').replace(/Alt/g,'⌥')
      }
      return item;
    })
    return codes.join('+')
  }
  
  renderKeyList(){
    return this.state.keyList.map((item,index)=>{
      
      return (
        <div key={index} className='key-item'>
          <span className='key'>{item.name}</span>
          {
            item.options?
            <Radio.Group
              options={item.options.map((el,index)=>{
                return {
                  label:this.displayKeyString(el.key),
                  value:el.key
                }
              }
              )}
              onChange={(e)=>{
                console.log(e)
                const newKeyItem = {...item, key:e.target.value}
                this.state.keyList = this.state.keyList.map((el,index)=>{
                  if(el.name == newKeyItem.name){
                    return newKeyItem
                  }
                  return el
                })
                this.setState({
                  keyList:[...this.state.keyList]
                })
              }}
              value={item.key}
            />
            :<Input value={this.displayKeyString(item.key)} readOnly style={{width:'300px'}}></Input>
          }
        </div>
      )
    })
  }
  render(){
    return (
      <>
        <div className='setting-common'>
          <div className='setting-detail-head'>
            快捷键
          </div>
          <div className='setting-detail-body setting-detail-body-shortkey'>
            <div className='section'>
              <div className="content">
              {this.renderKeyList()}
              </div>
             
            </div>
          </div>
        </div>
      </>
    )
  }
}
